<template>

  <el-card style="margin: 20px;">
    <el-tabs style="margin-bottom: 50px;">
      <el-menu default-active="1" class="el-menu-demo" mode="horizontal">

        <el-menu-item index="1" class="statement"><strong style="color: #409eff;">工资报表</strong></el-menu-item>
      </el-menu>
    </el-tabs>
    <div class="rightLabBox">
      <a
        class="el-button fr el-button--primary el-button--mini"
        title="导出"
        @click="handleExport"
      >导出</a>
    </div>
    <el-table
      :data="formDatalist"
      style="width: 100%;"
    >
      <el-table-column type="index" label="序号" center width="50" />
      <el-table-column prop="username" label="姓名" width="150px" />
      <el-table-column prop="mobile" label="手机号" width="150px" />
      <el-table-column prop="workNumber" label="工号" width="150px" />
      <el-table-column prop="departmentName" label="部门名称" width="150px" />
      <el-table-column prop="inServiceStatus" :formatter="inService" label="在职状态" width="150px" />
      <el-table-column prop="providentFundIndividual" label="公积金个人" width="150px" />
      <el-table-column prop="socialSecurityIndividual" label="社保个人" width="150px" />
      <el-table-column prop="socialSecurityEnterprise" label="社保企业" width="150px" />
      <el-table-column prop="providentFundEnterprises" label="公积金企业" width="150px" />
      <el-table-column prop="socialSecurityProvidentFundEnterprises" label="公积金社保企业" width="150px" />
      <el-table-column prop="currentBaseSalary" label="基本工资" width="150px" />
      <el-table-column prop="currentBaseSalary" label="岗位工资" width="150px" />
      <el-table-column prop="salaryChangeAmount" label="福利津贴" width="150px" />
      <el-table-column prop="attendanceDeductionMonthly" label="考勤扣款" width="150px" />
      <el-table-column prop="currentSalaryTotalBase" label="税前工资合计" width="150px" />
      <el-table-column prop="salaryByTax" label="应纳税工资" width="150px" />
      <el-table-column prop="tax" label="应扣税" width="150px" />
      <el-table-column prop="payment" label="实发工资" width="150px" />
    </el-table>
    <el-row type="flex" justify="center" align="middle" style="height:60px">
      <el-col :span="12">
        <el-button size="small" type="primary" @click="archivingReportForm">归档{{ yearMonth ? yearMonth.substr(4) : '' }}月份报表</el-button>
        <el-button size="small" type="primary" @click="createReportForm">新建报表</el-button>
        <el-button size="small" @click="$router.back()">取 消</el-button>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { salarysreportsyearMonth, newReport } from '@/api/salarys'
import { formatDate } from '@/filters'
export default {
  data() {
    return {
      formDatalist: [],
      yearMonth: this.$route.query.yearMonth
    }
  },
  created() {
    this.salarysreportsyearMonth()
  },
  methods: {
    // 获取数据
    async salarysreportsyearMonth() {
      const yearMonth = this.yearMonth
      this.formDatalist = await salarysreportsyearMonth({ yearMonth, opType: 1 })
    },
    inService(data) {
      return data.inServiceStatus === '1' ? '在职' : '离职'
    },
    // 归档
    archivingReportForm() {
      this.$confirm('您确认归档当月报表吗？(报表归档将覆盖上一次归档记录，无法恢复)', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '归档成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '你已取消'
        })
      })
    },
    // 新建报表
    createReportForm() {
      const yearMonth = this.getNextMonth()
      const year = yearMonth.substring(0, 4)
      const month = yearMonth.substring(4)
      this.$confirm(
        '您将创建 《 ' + year + '年' + month + '月 》 报表').then(() => {
        this.yearMonth = yearMonth
        this.createNewReport(this.yearMonth)
        this.$message.success('新建报表成功')
        this.salarysreportsyearMonth()
      })
    },
    async createNewReport(yearMonth) {
      await newReport({ yearMonth })
    },
    getNextMonth() {
      const year = this.yearMonth.substring(0, 4)
      const month = this.yearMonth.slice(4)
      let year2 = year
      let month2 = parseInt(month) + 1
      if (month2 === 13) {
        year2 = parseInt(year2) + 1
        month2 = 1
      }
      if (month2 < 10) {
        month2 = '0' + month2
      }
      const t2 = year2 + month2
      return t2
    },
    async handleExport() {
      const { export_json_to_excel } = await import('@/vendor/Export2Excel')
      const arr = this.formDatalist
      const dict = {
        姓名: 'username',
        手机号: 'mobile',
        工号: 'workNumber',
        部门名称: 'departmentName',
        在职状态: 'inServiceStatus',
        公积金个人: 'providentFundIndividual',
        社保个人: 'socialSecurityIndividual',
        社保企业: 'socialSecurityEnterprise',
        公积金企业: 'providentFundEnterprises',
        公积金社保企业: 'socialSecurityProvidentFundEnterprises',
        基本工资: 'currentBaseSalary',
        岗位工资: 'currentBaseSalary',
        福利津贴: 'salaryChangeAmount',
        考勤扣款: 'attendanceDeductionMonthly',
        税前工资合计: 'currentSalaryTotalBase',
        应纳税工资: 'salaryByTax',
        应扣税: 'tax',
        实发工资: 'payment'
      }
      const userData = arr.map((user) => {
        return this.object2Arrayy(user, dict)
      })
      export_json_to_excel({
        header: Object.keys(dict),
        data: userData
      })
    },
    // 改变数据格式
    object2Arrayy(user, dict) {
      const newUser = []
      for (const key in dict) {
        const enkey = dict[key]
        const value = user[enkey]
        // 如果是时间的数据不能直接放,而是应该进行转换
        if (enkey === 'timeOfEntry' || enkey === 'correctionTime') {
          // 格式化日期
          newUser.push(new Date(formatDate(value)))
        } else if (enkey === 'inServiceStatus') {
          newUser.push(value === 1 ? '在职' : '离职')
        } else {
          newUser.push(value)
        }
      }
      return newUser
    }
  }
}
</script>

<style>
.statement{
  font-size: 20px;
}
.rightLabBox {
          position: absolute;
          right: 29px;
          top: 120px;
        }
</style>
